/* 
假设 这个班级的人数 100人   不分姓。。。
1 查询 姓 以  万开头 
  2人。。。
2 每一页装10个人
3 给我查下 第 10页的  姓万。。。 
 */
$(function() {
    // 0 定义一个全局变量  获取文章列表数据 的 参数 
    let Params = {
        // string	搜索关键词，可以为空，为空返回某类型所有文章
        key: "",
        // string	文章类型id，可以为空，为空返回所有类型文章
        type: "",
        // string	文章状态，草稿 ，已发布,为空返回所有状态文章
        state: "",
        // number	当前页，为空返回第1页
        page: 1,
        // number	每页显示条数，为空默认每页6条
        perpage: 10,
    }

    // 0 定义一个 数据带总条数 全局变量
    let totalCount = 0;

    // 1 发送请求 动态渲染文章分类 下拉框
    function getCategorytList() {
        $.get("/admin/category/list", function(res) {
            let html = "<option value=''>所有分类</option>";
            res.data.forEach(item => {
                html += `<option value="${item.id}" >${item.name}</option>`;
            });
            $("#selCategory").html(html);
        })
    }
    // 2 获取文章列表
    function getArticleQuery() {
        $.get("/admin/article/query", Params, function(res) {
            const data = res.data.data;
            const html = template("art_list", { data });
            $("#mainTable tbody").html(html);
            // 获取总条数
            totalCount = res.data.totalCount;
            // 渲染分页组件
            renderPager();
        })

    }
    // 3 筛选按钮
    $("#btnSearch").click(function() {

        // 3.0  重置页码 从第一页开始 查询
        Params.page = 1;
        // 3.1 获取表单的值
        Params.key = $("#aname").val().trim(); // 获取输入框
        Params.type = $("#selCategory").val(); //  获取下拉列表id  文章分类
        Params.state = $("#selStatus").val(); // 获取下拉列表 状态 值
        // 3.2 发送请求
        getArticleQuery();
    })

    // 4 重置 
    $("#btnReset").click(function() {
        // 4.0  重置页码 从第一页开始 查询
        Params.page = 1;
        //  4.1 重置 表单 组件
        $("#aname").val("");
        $("#selCategory").val("");
        $("#selStatus").val("");
        // 4.2 重置 接口参数
        Params.key = "";
        Params.type = "";
        Params.state = "";
        // 4.3  重新发送请求 来渲染页面 
        getArticleQuery();
    })

    // 5 给删除按钮 绑定点击事件
    // 动态生成  事件委托
    $("#mainTable").on("click", ".delete", function() {
        // 5.1 弹出提示框 询问用户
        layer.confirm("您确定删除吗?", { title: "提示" }, (index) => {
            // 5.2 获取id 发送删除请求
            const id = $(this).data("id")
            $.post("/admin/article/delete", { id }, function(res) {
                // 5.3 刷新页面即可
                layer.msg(res.msg);
                getArticleQuery();
            })
        })
    })

    // 分页
    // 接口参数 理解
    // 分页组件 使用 理解
    // 业务  接口参数和 分页  组装如何使用  理解 
    // 5 渲染分页组件
    function renderPager() {
        layui.laypage.render({
            elem: 'pager',
            count: totalCount, // 数据的总条数 
            limit: Params.perpage, // 设置每一页的条数 10 条
            curr: Params.page, //先显示2
            jump(obj, first) {
                // 被点击的页数
                if (!first) {
                    // 给全局参数赋值
                    Params.page = obj.curr;
                    // 重新发送一次请求获取对应页码数据
                    getArticleQuery();
                    // 存在bug 每一次点击 页码都重新变回1  
                }
            }

        });
    }

    // 1 发送请求 动态渲染文章分类 下拉框
    getCategorytList();
    // 2 获取文章列表
    getArticleQuery();
})